<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>我的图灵机器人</title>
    <style type="text/css">
    body{
/*        background:url("img/beij.jpeg"); */
           background:url("../img/bk.jpg");  
/*         background:url("../img/backgrounds/1.jpg");  */
    }
    input{outline:medium;}
    
        .talk_con{
            width:1000px;
            height:600px;
             border:1px solid white;  
            margin:50px auto 0;
            background: #D8BFD8		;
/*  #EEA9B8  #E0EEEE  #CD919E        #8E388E; */
           

        }
        .r1{
          width:70%;
          height:70%;
          border-style:none solid solid none; 
          border-width:0.1px;
          border-right-color:#FFFFE0 ;
          border-bottom-color:#FFFFE0 ;
          margin-left:150px;
           background:url("../img/fen3.jpeg");
           background-size:100% 100%;
          overflow:auto;
          margin-top:-42%;
        }
        .r11{
          width:70%;
          height:70%;
          border-style:none solid solid none; 
          border-width:0.1px;
          border-right-color:#FFFFE0 ;
          border-bottom-color:#FFFFE0 ;
          margin-left:150px;
/*           background:url("img/p6.jpg"); */
/*          background:url("img/fen6.jpeg"); */
          background:url("../img/fen7.jpeg");
           background-size:100% 100%;
          overflow:auto;
        }
        .r2{
          width:70%;
          height:20%;
          margin-left:150px;
          background:	#FFF0F5;
          border-style:solid none none none;
          border-width:0.5px;
          border-color:#CDC9C9;
          margin-top:-12.5%;
        }
        .r22{
          width:70%;
          height:20%;
          margin-left:150px;
          background:	#FFF0F5;
          border-style:solid none none none;
          border-width:0.5px;
          border-color:#CDC9C9;
        }
        .left{
          width:15%;
          height:90%;
          margin-top:-53.5%;
          
        }
        .right{
          width:15%;
          height:90%;
          margin-left:85%;
          margin-top:-54.2%;
          background:	#FFF0F5;
          border-style:none none none solid;
          border-width:0.5px;
          border-color:#CDC9C9;
          background:url("../img/tu.png"); 
        
        }
  
        .atalk{
           margin:10px; 
           text-align:left;
        }
        .robot{
          width:50px;
          height:50px;
          border-radius:50%;
          background:url("../img/robot.jpg");
          background-size:100% 100%;
          
        }       
        .atalk span{
            display:inline-block;
            background:#0181cc;
            border-radius:10px;
            color:#fff;
            padding:5px 10px;
            margin-left:40px;
        }
        .btalk{
            margin:10px;
            text-align:right;                    
        }
        .me{
          width:50px;
          height:50px;
          border-radius:50%;
          background:url("../img/me.jpg");
          background-size:100% 100%;
          float:right;
        }
        .btalk span{
            display:inline-block;
            background:#96CDCD;
            border-radius:10px;
            color:#fff;
            padding:5px 10px;
            margin-top:40px;
            margin-left:10px;
        }
        .k1{
            margin-top:-15px;border:none;width:150px;height:65px;background:#FFF0F5;
        }
        .k2{
           margin-top:-10px;border:none;width:150px;height:65px;background:#FFF0F5;
        }
        .list1{
           width:180px;
           height:70px;
           margin-top:-60px;
           
        }
        .list2{
           width:180px;
           height:70px;
           margin-top:-60px; 
        }
        .list11{
           width:150px;
           height:70px;
           margin-top:-65px;
           background:#FFAEB9;
/*            #EED2EE; */
        }
        .list22{
           width:150px;
           height:70px;
           margin-top:-65px; 
           background:#FFAEB9;
        }
        
        
         .ctalk{
           margin:10px; 
           text-align:left;
        }
        .robot2{
          width:50px;
          height:50px;
          border-radius:50%;
          background:url("../img/robot3.jpg");
          background-size:100% 100%;          
        }       
        .ctalk span{
            display:inline-block;
            background:#0181cc;
            border-radius:10px;
            color:#fff;
            padding:5px 10px;
            margin-left:40px;
        }
        .dtalk{
            margin:10px;
            text-align:right;                    
        }
        .me2{
          width:50px;
          height:50px;
          border-radius:50%;
          background:url("../img/me.jpg");
          background-size:100% 100%;
          float:right;
        }
        .dtalk span{
            display:inline-block;
            background:#96CDCD;
            border-radius:10px;
            color:#fff;
            padding:5px 10px;
            margin-top:40px;
            margin-left:10px;
        }
        
        .talkwords{
           width:100%;height:70%;border:none;background:#FFF0F5;
        }
        .talkwords2{
           width:100%;height:70%;border:none;background:#FFF0F5;
        }
        .close{
         width:30px;height:30px;border:none;margin-top:-62.5%;margin-left:97%;-webkit-box-align: center;text-align:center;
        }
        .close1{
          width:30px;height:30px;border:none;margin-top:-62.5%;margin-left:97%;background:#FF8C69;-webkit-box-align: center;text-align:center;
        }
    </style>
<script type="text/javascript" src="../static/js/jquery.js"></script>

</head>
<body>
 <div class="talk_con">
 <p id="title" style="font-size:20px;color:	#8B8B7A;font-family:'黑体';text-align:center">我的图灵机器人</p>
 
  <div class="r11" id="words2" >
       <div class="ctalk" id="ctalk" name="ctalk">
       <div class="robot2" id="pic2"></div>
       <span id="asay2" name="ctalkContent">你好，我是乔治</span>
       </div>
 </div>
 
 <div class="r1" id="words">
       <div class="atalk" id="atalk" name="atalk">
       <div class="robot" id="pic"></div>
       <span id="asay" name="atalkContent">你好，我是佩奇</span>
       </div>
 </div>
 
  <div class="r22" id="r22">
        <input type="text"  id="talkwords2" class="talkwords2" name="talkwords2">       
       <input type="button" value="发送" id="talksub2" style="width:150px;height:30px;background:#FFDEAD;margin-left:75%;border:none">
 </div>
 
 <div class="r2" id="r2">
        <input type="text"  id="talkwords" class="talkwords" name="talkwords">       
       <input type="button" value="发送" id="talksub" style="width:150px;height:30px;background:#FFDEAD;margin-left:75%;border:none">
 </div>
 
<div class="left">

  <div class="k1" id="k1"></div>
  <div class="list1" id="list1" >
  <img id="imgPhoto" style="border-radius: 25px;border: none" width="50px" height="50px" src="../img/robot.jpg" />
  <p style="margin-top:-40px;margin-left:50px;font-family:'宋体';font-size:18px;color:grey">佩奇机器人 </p> 
  </div>


 <div class="k2" id="k2"></div>
  <div class="list2" id="list2">
   <img id="imgPhoto1" style="border-radius: 25px;border: none;" width="50px" height="50px" src="../img/robot3.jpg" />
  <p style="margin-top:-40px;margin-left:50px;font-family:'宋体';font-size:18px;color:grey">乔治机器人 </p> 
  </div> 
  
</div>
 
 <div class="right">
 </div>
 
 <div class="close" id="close">
 <p style="font-size:25px;color:white;align:center" onmouseover="mOver()"  onmouseout="mOut()" >×</p>

 </div>
 
</div>
</body>

 <script>

 function mOver()
 {
	 var close=document.getElementById('close');
	 close.className="close1";
 }

 function mOut()
 {
	 var close=document.getElementById('close');
	 close.className="close";
 }
 
 </script>
<script type="text/javascript">
 
    $().ready(function(){
    	
        
        var k1=document.getElementById('list1');
        var k2=document.getElementById('list2');
        var close=document.getElementById('close');
        var title=document.getElementById('title');

        close.onclick=function(){
        	window.location.href="../static/jsp/main.jsp?code=1&user="+"<%=request.getParameter("user")%>";
        }
        
        k1.onclick = function () {
        	
        	  document.onkeydown=function(e){  //设置enter快捷方式
        	       if(event.keyCode == 13) {
        	    	   document.getElementById("talksub").click();
        	          return false;
        	       }
        	   }

            var ch11 = document.getElementById("words2");
           ch11.style.visibility="hidden";
            
             var ch22 = document.getElementById("r22");
            ch22.style.visibility="hidden";

            var th1 = document.getElementById("words");
            th1.style.visibility="visible"

             var th2 = document.getElementById("r2");
             th2.style.visibility="visible";

            title.innerHTML = "佩奇机器人";
            k1.className = "list11";
            k2.className = "list2";
            
           

            $("#talksub").click(function () {
           	           	
                if ($("#talkwords").val() || '') {

                    //if($(".talkwords").val().trim() !="" ){
                    //发送按钮点击 向图灵接口发送请求
                    //图灵接口地址
                    var url = "http://www.tuling123.com/openapi/api";
                    //传输数据
                    var data = {
                        "key": "0af8d11698ba44469032a265115eb81b",
                        "info": $("#talkwords").val()
                    }

                    $("#words").append("<div class='btalk'><div class='me'></div><span> " + $("#talkwords").val() + "</span></div>");
                    //异步请求 post请求方式
                    
                    $.post(url, data, function (res) {
                        if (res.code == 100000) {
                            //代表响应成功

                            $("#words").append("<div class='atalk'><div class='robot'></div><span> " + res.text + "</span></div>");
                          
                        }                        
                    }, "json");
                     
                    
                    
                    $("#talkwords").val("");
                    $("#talwords").focus(function () {
                        $("#talkwords").css("background-color", "#FDF5E6");
                    });

                } else {
                    //alert("消息不能为空");
                }
            });
        }

        k2.onclick = function () {

        	  document.onkeydown=function(e){  //设置enter快捷方式
        	       if(event.keyCode == 13) {
        	    	   document.getElementById("talksub2").click();
        	          return false;
        	       }
        	   }
        	  
        	k2.className = "list22";
            k1.className = "list1";
            title.innerHTML = "乔治机器人";

            var ch1 = document.getElementById("words");
            ch1.style.visibility="hidden";
           

             var ch2 = document.getElementById("r2");
             ch2.style.visibility="hidden";

            var th11 = document.getElementById("words2");
            th11.style.visibility="visible";
            
             var th22 = document.getElementById("r22");
            th22.style.visibility="visible";
             
     

            $("#talksub2").click(function(){
          
            
                if($("#talkwords2").val() == undefined ? '' : $("#talkwords2").val().trim()){
                    //if($(".talkwords2").val().trim() !="" ){
                    //发送按钮点击 向图灵接口发送请求
                    //图灵接口地址
                    var url="http://www.tuling123.com/openapi/api";
                    //传输数据
                    var data =
                        {
                            "key":"bcfa8a91bbe7465dbe4b2493a65e4b3b",
                            "info":$("#talkwords2").val()
                        }
                    $("#words2").append("<div class='dtalk'><div class='me2'></div><span> " + $("#talkwords2").val() +"</span></div>");
                                     							
					 //异步请求 post请求方式
                    $.post(url,data,function(res){
                        if(res.code == 100000){
                            //代表响应成功
                            $("#words2").append("<div class='ctalk'><div class='robot2'></div><span> " + res.text +"</span></div>");
                           
                        }
                    },"json");

                    $("#talkwords2").val("");
                    $("#talkwords2").focus(function(){
                        $("#talkwords2").css("background-color","#FDF5E6");
                    });
                    
                    

                }else{
                    //alert("消息不能为空");
                }
            });


        }

    })

</script>
</html>